<template>
	<view class="login">
		<view class="login-title">注册</view>
		<view class="login-content">
			<view class="login-username">
				<i class="el-icon-user"></i>
				<input type="text" placeholder="请输入账号" v-model="phone">
			</view>
			<view class="login-password">
				<i class="el-icon-key"></i>
				<input type="safe-password" name="" id="" placeholder="请输入密码" v-model="password">
			</view>
		</view>
		<view class="button"><button @click="onsubmit">注册</button></view>
		<view class="login-other">
			
			<view class="login-icon">
				<image  mode="widthFix"></image>
				<image  mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
	data() {
		return {
			phone:'',
			password:'',
			rules: {
				phone: [{ required: true, message: '请输入手机号', rule: '/^1[23456789]\d{9}$/' }],
				password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
			}
		};
	},
	methods: {
		// ...mapMutations(['user_Login']),
		//登录
		onsubmit() {
			if(this.phone==''||this.password==''){
				uni.showToast({
					title:"内容不能为空哦！",
					icon:"none"
				})
			}else{
				wx.showToast({  //弹框提示
					icon: 'success',
					title: '注册成功！正在跳转登录...',
					duration: 2000,
				})
				setTimeout(()=>{
					uni.navigateTo({
						url: '../Login/Login'
					});
				},2000)
			}
		},
		
		
	}
};
</script>

<style lang="less">
.login {
	background-image:url("https://img.tukuppt.com/ad_preview/00/24/32/5c9a6feb2b02f.jpg!/fw/780");
	background-repeat: no-repeat;
	background-position: center 4vh !important;
	 // background-image: linear-gradient(120deg, #05ee28, #6a3dad);
	 background-color: #fff;
	width: 100%;
	background-position: center;
	background-size: cover;
	// background-color: #464646;
	margin:0px;
	background-size:100% 100%;
	background-attachment:fixed;
	height: 1535rpx;
	opacity: 0.8;
	.login-title {
		padding-top: 150rpx;
		display: flex;
		justify-content: flex-start;
		margin-left: 50rpx;
		font-weight: 700;
		font-size: 40rpx;
		color: #11cd6e;
		letter-spacing: 5rpx;
		margin-bottom: 50rpx;
	}
	.login-content{
		.login-username{
			display: flex;
			align-items: center;
		    margin: 0 50rpx;
			border-bottom: 1rpx solid gainsboro;
			input{
				padding: 10rpx;
				height: 60rpx;
				width: 80%;
			}
			i {
				color: #11c53e;
				padding-right: 20rpx;
				font-size: 50rpx;
			}
		}
		.login-password{
			display: flex;
			align-items: center;
		    margin: 0 50rpx;
			border-bottom: 1rpx solid gainsboro;
			margin-top: 50rpx;
			input{
				padding: 10rpx;
				height: 60rpx;
				width: 80%;
			}
			i {
				color: #11c53e;
				padding-right: 20rpx;
				font-size: 50rpx;
			}
		}
	}
	.button{
		margin-top: 120rpx;
		
		button{
			background-color:#11c53e;
			width: 90%;
			height: 85rpx;
			text-align: center;
			line-height: 85rpx;
			color: #fff;
		}
	}
	.login-botton{
		display: flex;
		justify-content: center;
		margin-top: 100rpx;
		.login-password{
			padding: 0 15rpx;
			color: #11c53e;
		}
		.login-zhuce{
			padding: 0 15rpx;
			color: #11c53e;
		}
	}
	.login-other{
		position: absolute;
		bottom: 100rpx;
	    left: 37%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.login-top{
			text-align:center;
		}
		.login-icon{
			display: flex;
			justify-content: space-between;
			margin-top: 50rpx;
			image{
				width: 80rpx;
			}
		}
	}
	
}
</style>

